<template>
	<view class="e-skeleton-menu" :style="[customStyle]">
		<view class="e-skeleton-menu__rows" v-for="(cols, index) in menuList" :key="index">
			<view class="e-skeleton-menu__cols h-flex-item-grow" v-for="(item, indexs) in cols" :key="indexs">
				<view class="e-skeleton-menu__cols__icon" :class="[config.itemShape === 'circle' && 'e-skeleton-menu__cols__icon--circle']">
					<SkeletonBlock>
						<view class="e-skeleton-menu__cols__icon-block"></view>
					</SkeletonBlock>
				</view>

				<SkeletonBlock v-if="config.showText">
					<view class="e-skeleton-menu__cols__text"></view>
				</SkeletonBlock>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	name: 'skeleton-menu'
});
</script>

<script lang="ts" setup>
import { computed } from 'vue';
import SkeletonBlock from './block.vue';

const props = withDefaults(
	defineProps<{
		config: {
			rows: number;
			cols: number;
			itemShape: 'circle' | 'square';
			showText: boolean;
		};
		customStyle?: Record<any, any>|string;
		animate?: boolean;
	}>(),
	{
		config: () => ({
			rows: 3,
			cols: 4,
			itemShape: 'square',
			showText: true
		})
	}
);

const menuList = computed(() => {
	return [...new Array(props.config.rows).keys()].map((item) => {
		return [...new Array(props.config.cols).keys()];
	});
});
</script>

<style lang="scss" scoped>
@import '../../libs/theme/skeleton-menu.scss';
</style>
